<template>
  <right-template :title="componentData.title" :tabName="componentData.tabName">
    <el-form class="right-address">
      <input-normal label="导出表头" v-model="commonAttr.tableName" @change="onChangeAttr"></input-normal>
      <input-normal label="占位提示" v-model="commonAttr.placeholder" @change="onChangeAttr"></input-normal>
      <slider-normal v-model="commonAttr.fontSize" label="字号" :max="100" :step="1" @change="onChangeAttr"></slider-normal>
      <color-normal v-model="commonAttr.color" label="字体颜色" format="rgb" @change="onChangeAttr"></color-normal>
      <color-normal v-model="commonAttr.arrowBtnColor" label="下拉箭头颜色" format="rgb" @change="onChangeAttr"></color-normal>
    </el-form>
  </right-template>
</template>

<script setup lang="ts">
import { useWebComponentStore } from '@/store/web/component'

const useWebComponent = useWebComponentStore()

let componentData_: any
const componentData = computed(() => {
  componentData_ = useWebComponent.currentComponentData
  return componentData_
})
let commonAttr_: any
const commonAttr = computed(() => {
  commonAttr_ = useWebComponent.currentComponentData!.commonAttr
  return commonAttr_
})
const onChangeAttr = () => {
  // useWebComponent.updateCurrentComponentData({ commonAttr: commonAttr_ })
}
</script>